/**
在 Vue 3 中，响应式系统是其核心特性之一，允许开发者在数据变化时自动更新视图。以下是对 Vue 3 响应式逻辑的说明总结：
  1. 响应式的基本概念
  - 响应式：指的是当数据发生变化时，相关的视图会自动更新。Vue 通过劫持数据的 getter 和 setter 来实现这一点。
  - 在 Vue 3 中，响应式系统使用了 Proxy API，相比 Vue 2 的 Object.defineProperty，性能更好，支持更多的场景。
  2. 创建响应式对象
  在 Vue 3 中，可以使用  `reactive`  函数来创建响应式对象。

  示例：
  import { reactive } from 'vue';

  const state = reactive({
    count: 0
  });

  // 修改响应式数据
  state.count++;
  3. 计算属性
  计算属性是基于响应式数据的衍生状态。它们会自动依赖于其使用的响应式数据，并在数据变化时重新计算。

  示例：
  import { computed } from 'vue';

  const count = reactive({ value: 0 });
  const doubleCount = computed(() => count.value * 2);
  4. 侦听器
  使用  `watch`  函数可以侦听响应式数据的变化，并在变化时执行某些操作。

  示例：
  import { watch } from 'vue';

  const state = reactive({ count: 0 });

  watch(
    () => state.count,
    (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  );
  5. 响应式数组
  Vue 3 的响应式系统同样支持数组。对数组的操作（如 push、pop、shift、unshift、splice 等）都会触发视图更新。

  示例：
  const items = reactive(['apple', 'banana']);
  items.push('orange'); // 视图会自动更新
  6. 使用  `ref`  处理基本数据类型
  对于基本数据类型（如字符串、数字等），可以使用  `ref`  函数创建响应式引用。

  示例：
  import { ref } from 'vue';

  const count = ref(0);
  count.value++; // 通过 .value 访问和修改
  7. 组合式 API
  Vue 3 推出了组合式 API，使得响应式逻辑更加灵活和可复用。通过  `reactive` 、 `ref` 、 `computed`  和  `watch`  等函数，开发者可以在  `setup`  函数中组织和管理响应式状态。

  总结
  Vue 3 的响应式系统是基于 Proxy 的，提供了更高性能和更强大的功能。通过  `reactive` 、 `ref` 、 `computed`  和  `watch`  等 API，开发者可以轻松创建和管理响应式数据，使得数据变化时视图能够自动更新，从而提升了开发效率和用户体验。理解和掌握响应式逻辑是使用 Vue 3 的关键。
 */

  let count = 0;

  console.log(count * 2);
  count++;
  num = 200

  // 对象的响应式
  const state = {
    name: 'responsive',
    age: 18
  }

  function foo() {
    console.log(state.name, state.age);
  }

  function bar() {
    console.log(state.name, state.age);
  }

  // 修改对象的属性
  state.name = 'responsive2'
  state.age = 20
  